new Vue({
	el: '#app',
	data: function () {
		return {
			loading:false,//进去的加载中显示
			host: window.location.protocol+'//'+window.location.host,
			communityId:'',
			msg:'请求超时',
			errorPopup:false,
			showErrorMsg:false,
			headers:{
				'app-id':'992019111758490006',
				'appId':'992019111758490006',
				'TRANSACTION-ID':this.uuid(),
				'REQ-TIME':this.getDateYYYYMMDDHHMISS(),
				'SIGN':'',
				'user_id':'-1',
				'communityId':this.communityId,
			},

			triggerVillage:'',
			triggerVillageValue:'请选择小区',
			triggerVillageId:'',
			triggerVillageOptions:[
				{id:'',value:'请选择小区'},
			],

			triggerBuild:'',
			triggerBuildValue:'请选择楼栋',
			triggerBuildId:'',
			triggerBuildOptions:[
				{id:'',value:'请选择楼栋'},
			],

			triggerUnit:'',
			triggerUnitValue:'请选择单元',
			triggerUnitId:'',
			triggerUnitOptions:[
				{id:'',value:'请选择单元'},
			],

			triggerRoom:'',
			triggerRoomValue:'请选择房号',
			triggerRoomId:'',
			triggerRoomOptions:[
				{id:'',value:'请选择房号'},
			],
			roomIds:[],
			roomNames:[],

			imgLength:0,
			fileFrontUrl:'',
			uploadFront:'',
			fileList:[],
			showUploadBtn:true,
		    selectOwnList:[
				{img:'./img/identity1.png',type:'1001',name:'业主'},
				{img:'./img/identity2.png',type:'1002',name:'家人'},
				{img:'./img/identity3.png',type:'1003',name:'租客'},
			],
			selectTypeDefault:'1001',
			bindName:'',
			bindMobile:'',
			isOwner:false,
			roomNameStr:'',
			popupSubmitConfim:false,
			submitBstap:true,
		}
	},
	created() {
		var localStorageCommunityId=JSON.parse(localStorage.getItem('hc_currentCommunityInfo'))
		if(localStorageCommunityId){
			this.communityId=localStorageCommunityId.communityId?localStorageCommunityId.communityId:this.getUrlParam("communityId");
		}else{
			this.communityId=this.getUrlParam("communityId");
		}
		this.headers.communityId=this.communityId;
		this.queryVillage();
		console.log(this.communityId,this.headers)
	},
	mounted(){
		var that=this;
		// 具体小区
		this.triggerVillage = new MobileSelect({
			trigger: '#triggerVillage', 
			title: '请选择小区',  
			wheels: [
				{data:that.triggerVillageOptions}
			],
			position:[0], //初始化定位
			callback:function(indexArr, data){
				console.log('选择小区Id',data);
				that.triggerVillageValue=data[0].value;
				that.triggerVillageId=data[0].id;
				if(that.triggerVillageId){
					that.queryBuild();
				}
			    that.reset(3);	
			},
		});

		// 楼/栋
		this.triggerBuild = new MobileSelect({
			trigger: '#triggerBuild', 
			title: '请选择楼栋',  
			wheels: [
				{data:that.triggerBuildOptions}
			],
			position:[0], //初始化定位
			callback:function(indexArr, data){
				console.log('选择楼栋Id',data);
				that.triggerBuildValue=data[0].value;
				that.triggerBuildId=data[0].id;
				if(that.triggerBuildId){
					that.queryUnit();
				}
				that.reset(2);
			},
		});

		// 单元
		this.triggerUnit = new MobileSelect({
			trigger: '#triggerUnit', 
			title: '请选择单元',  
			wheels: [
				{data:that.triggerUnitOptions}
			],
			position:[0], //初始化定位
			callback:function(indexArr, data){
				console.log('选择单元Id',data);
				that.triggerUnitValue=data[0].value;
				that.triggerUnitId=data[0].id;
				if(that.triggerUnitId){
					that.queryRoom();
				}
				that.reset(1);				
			},
		});

		// 房号
		this.triggerRoom = new MobileSelect({
			trigger: '#triggerRoom', 
			title: '请选择房号',  
			wheels: [
				{data:that.triggerRoomOptions}
			],
			position:[0], //初始化定位
			callback:function(indexArr, data){
				console.log('选择房号Id',data);
				that.triggerRoomValue=data[0].value;
				that.triggerRoomId=data[0].id;
			},
		});
	},
	filters: {
		subStringThree: function (value) {
			if (!value) return ''
			return value.substring(0,3)
		}
	},
	methods: {
		uuid() {
			let s = [];
			let hexDigits = "0123456789abcdef";
			for (let i = 0; i < 36; i++) {
				s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			}
			s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
			s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
			s[8] = s[13] = s[18] = s[23] = "-";
	
			let uuid = s.join("");
			return uuid;
		},
		getDateYYYYMMDDHHMISS(){
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			if (hour < 10) {
				hour = '0' + hour;
			}
			if (minute < 10) {
				minute = '0' + minute;
			}
			if (second < 10) {
				second = '0' + second;
			}
			return year + "" + month + "" + day + "" + hour + "" + minute + "" + second;
		},
		getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]);
			return null; //返回参数值	  
		},
		// 图片上传
		clickUploadImg(){
			this.$refs.uploadFile.dispatchEvent(new MouseEvent('click'))
		},
		// 图片上传
		upload (event) {
			let files = event.target.files || event.dataTransfer.files
			let file=files[0];
			var url='';
			var that=this;
			// var reader = new FileReader();
			// reader.readAsDataURL(file);
			if(!file){
				return
			}
			if(file.size < 1024 * 1024 * 1){//小于1M不压缩图片
			  this.notcompressImg(file,url)
			}else{
				if( file.size > 1024 * 1024 * 5 ){//大于5M提示
					that.showErrorMsg=true;
					that.errormsg='图片大小请控制在5MB以内';
					that.$refs.uploadFile.value=''
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)	
				}else{
					this.compressImg(file,url)
				}
			}
		},
		// 图片不压缩
		notcompressImg(file,url){
			let that = this;
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function (e) {
				url=this.result.substring(this.result.indexOf(',')+1);
				// console.log("不压缩img："+url)
				that.fileFrontUrl='data:image/png;base64,'+url;
				that.uploadFront=url; 
				that.getFileUpload(that.fileFrontUrl)
			}
		}, 
		// 图片压缩方法
		compressImg(file,url){
		// 注意这里this作用域的问题
			let that = this;
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function(e) {
				var bdata = this.result;
				// 这里quality的范围是（0-1）
				var quality = 0.1;
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext("2d");
				var img = new Image();
				img.src = bdata;
				img.onload =function() {
					var width = img.width;
					canvas.width = width;
					canvas.height = width * (img.height / img.width);
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					var data = canvas.toDataURL("image/jpeg",quality);
					url=data.substring(data.indexOf(',')+1);
					// console.log("压缩img："+url)
					that.fileFrontUrl='data:image/jpeg;base64,'+url;
					that.uploadFront=url;
					that.getFileUpload(that.fileFrontUrl)
				}
			};
		},
		//图片上传接口
		getFileUpload(file) {
			let that=this;
			var filelist=[]
			filelist.push(file)
			// // that.fileFrontUrl=file.name;
			var url=this.host+'/app/uploadFiles';
			var params={
				files:filelist,
				relTypeCd:'84003'
			}
			that.loading=true;
			setInterval(function(){
				that.loading=false;
			},3000)
			$.ajax({
				url : url,
				type: 'POST',
				dataType:'json',
				contentType: 'text/plain',
				headers:that.headers,
				data: JSON.stringify(params),
				success : function (res){
					console.log('上传图片',res);
					that.bstapBtn=true;
					if(res.code=='200'){
						var fileIds=res.fileIds[0];
						
						that.fileList.push({
							fileFrontUrl:file,
							fileIds:fileIds
						})
						console.log(that.fileList)
						var imglength=that.fileList.length;
						that.imgLength=imglength
						if(imglength>=3){
							that.showUploadBtn=false
						}else{
							that.showUploadBtn=true
						}
						that.showErrorMsg=true;
						that.errormsg='上传成功！';
						setTimeout(function(){
							that.showErrorMsg=false;
						},1500)
						that.loading=false;
		
						return;	
					}else{
						that.loading=false
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.loading=false
					that.bstapBtn=true;
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
				}
			})
		},
		removeUpload(item){	
			for(let i=0;i<this.fileList.length;i++){
				if(this.fileList[i]==item){
					this.fileList.splice(i,1)
				}
			}
			var that=this;
			var imglength=that.fileList.length;
			that.imgLength=imglength
			if(imglength>=3){
				that.showUploadBtn=false
			}else{
				that.showUploadBtn=true
			}
		},
		//身份切换
		selectType(type){
			this.selectTypeDefault=type;
			if(type=='1001'){
				this.isOwner=false;
			}else{
				this.isOwner=true;
			}
		},
		// 重置
		reset(type){
			var that=this;		
			if(type>=1){
				that.triggerRoomOptions=[
					{id:'',value:'请选择房号'}
				];
				that.triggerRoom.updateWheel(0, that.triggerRoomOptions);
				that.triggerRoomValue='请选择房号';
				that.triggerRoomId='';
				if(type>=2){
					that.triggerUnit.updateWheel(0, that.triggerUnitOptions);
					that.triggerUnitValue='请选择单元';
					that.triggerUnitId='';
					that.triggerUnitOptions=[
						{id:'',value:'请选择单元'}
					];
					if(type>=3){
						that.triggerBuildOptions=[
							{id:'',value:'请选择楼栋'}
						];
						that.triggerBuild.updateWheel(0, that.triggerBuildOptions);
						that.triggerBuildValue='请选择楼栋';
						that.triggerBuildId='';
					}	
				}
				
			}
		},
		// 查询具体小区
		queryVillage(){
			var that=this;
			var url=this.host+'/callComponent/nav/getCommunitys';
			var params={
				page:1,
				row:99,
			}
			$.ajax({
				url : url,
				type: 'GET',
				dataType:'json',
				headers:that.headers,
				data: params,
				success : function (res){
					console.log('查询小区',res);
						if(res.communitys && res.communitys.length>0){
							var list=res.communitys;
							that.triggerVillageOptions=[
								{id:'',value:'请选择小区'}
							]
							list.forEach(function(value,index) {
								that.triggerVillageOptions.push({
									id:value.communityId,
									value:value.name
								})
							});
							// console.log(that.triggerVillage)
							that.triggerVillage.updateWheel(0, that.triggerVillageOptions);
					}else{
						that.triggerVillageOptions=[
							{id:'',value:'请选择小区'}
						]
						that.triggerVillageValue='请选择小区';
						that.triggerVillageId='';
						that.triggerVillage.updateWheel(0, that.triggerVillageOptions);
						that.reset(3);
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.triggerVillageOptions=[
						{id:'',value:'请选择小区'}
					]
					that.triggerVillageValue='请选择小区';
					that.triggerVillageId='';
					that.triggerVillage.updateWheel(0, that.triggerVillageOptions);
					that.reset(3);
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
					console.log(res.responseText)

				}
			})

		},

		// 查询楼栋
		queryBuild(){
			var that=this;
			var url=this.host+'/callComponent/floorSelect2/list';
			var params={
				page:1,
				row:50,
				floorNum: '',
				communityId:that.triggerVillageId,
			}
			console.log(params)
			$.ajax({
				url : url,
				type: 'GET',
				dataType:'json',
				headers:that.headers,
				data: params,
				success : function (res){
					console.log('查询楼栋',res);
					if(res.apiFloorDataVoList  && res.apiFloorDataVoList.length>0){
						var list=res.apiFloorDataVoList;
						that.triggerBuildOptions=[
							{id:'',value:'请选择楼栋'}
						]
						list.forEach(function(value,index) {
							that.triggerBuildOptions.push({
								id:value.floorId,
								value:value.floorName
							})
						});
						that.triggerBuild.updateWheel(0, that.triggerBuildOptions);
					}else{
						that.reset(3);
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.reset(3)
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
					console.log(res.responseText)

				}
			})

		},

		// 查询单元
		queryUnit(){
			var that=this;
			var url=this.host+'/callComponent/unitSelect2/loadUnits';
			var params={
				page:1,
				unitNum:'',
				row:50,
				floorId: that.triggerBuildId,
				communityId:that.triggerVillageId,
			}
			$.ajax({
				url : url,
				type: 'GET',
				dataType:'json',
				headers:that.headers,
				data: params,
				success : function (res){
					console.log('查询单元',res);
					if(res && res.length>0){
						var list=res;
						that.triggerUnitOptions=[
							{id:'',value:'请选择单元'}
						]
						list.forEach(function(value,index) {
							that.triggerUnitOptions.push({
								id:value.unitId,
								value:value.unitNum+'单元'
							})
						});
						that.triggerUnit.updateWheel(0, that.triggerUnitOptions);	
					}else{
						that.reset(2)
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.reset(2)
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
					console.log(res.responseText)

				}
			})

		},

		// 查询房号
		queryRoom(){
			var that=this;
			var url=this.host+'/callComponent/roomSelect2/listRoom';
			var params={
				page:1,
				roomNum:'',
				row:1000,
				unitId: that.triggerUnitId,
				communityId:that.triggerVillageId,
			}
			$.ajax({
				url : url,
				type: 'GET',
				dataType:'json',
				headers:that.headers,
				data: params,
				success : function (res){
					console.log('查询房号',res);
					if(res.rooms && res.rooms.length>0){
						var list=res.rooms;
						that.triggerRoomOptions=[
							{id:'',value:'请选择房号'}
						]
						list.forEach(function(value,index) {
							that.triggerRoomOptions.push({
								id:value.roomId,
								value:value.roomNum+'室'
							})
						});
						that.triggerRoom.updateWheel(0, that.triggerRoomOptions);	
						
					}else{
						that.reset(1)
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.reset(1)
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
					console.log(res.responseText)

				}
			})
		},

		submitBtn(){
			var that=this;
			if(that.triggerVillageId==''){
				that.showErrorMsg=true;
				that.errormsg='小区名称不能为空';
				setTimeout(function(){
					that.showErrorMsg=false;
				},1500)
				return
			}
			else if(that.triggerBuildId==''){
				that.showErrorMsg=true;
				that.errormsg='楼栋不能为空';
				setTimeout(function(){
					that.showErrorMsg=false;
				},1500)
				return
			}
			else if(that.triggerUnitId==''){
				that.showErrorMsg=true;
				that.errormsg='单元不能为空';
				setTimeout(function(){
					that.showErrorMsg=false;
				},1500)
				return
			}
			else if(that.triggerRoomId==''){
				that.showErrorMsg=true;
				that.errormsg='房号不能为空';
				setTimeout(function(){
					that.showErrorMsg=false;
				},1500)
				return
			}
			
			if(that.selectTypeDefault!='1001'){
				var regPhone = /^1[3456789]{1}\d{9}$/
				if(that.bindName==''){
					that.showErrorMsg=true;
					that.errormsg='业主姓名不能为空';
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)
					return
				}
				else if(that.bindMobile==''){
					that.showErrorMsg=true;
					that.errormsg='业主手机号不能为空';
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)
					return
				} 
				if(!regPhone.test(that.bindMobile)){ 
					that.showErrorMsg=true;
					that.errormsg='请输入正确的手机格式';
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)
					return; 
				}
				if(that.fileList.length<1){
					that.showErrorMsg=true;
					that.errormsg='请上传证明材料';
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)
					return
				}
			}else{
				if(that.fileList.length<1){
					that.showErrorMsg=true;
					that.errormsg='请上传证明材料';
					setTimeout(function(){
						that.showErrorMsg=false;
					},1500)
					return
				}
			}
			that.roomNameStr=that.triggerBuildValue+that.triggerUnitValue+that.triggerRoomValue;
			that.roomNames.push(that.roomNameStr);
			that.roomIds.push(that.triggerRoomId);
			that.popupSubmitConfim=true;
		},
        //提交-确认按钮
		submitConfim(){
			let that=this;
			let url=this.host+'/app/front/userAuthentication';
			var auditFileId1,auditFileId2,auditFileId3;
			if(this.fileList[0]){
				auditFileId1=this.fileList[0].fileIds
			}
			if(this.fileList[1]){
				auditFileId2=this.fileList[1].fileIds
			}
			if(this.fileList[2]){
				auditFileId3=this.fileList[2].fileIds
			}
			let params={
				// "mobile":'',
				// "userName": '',
				"identityType":that.selectTypeDefault,
				"roomIds": that.roomIds,
				"roomNames": that.roomNames,
				"auditFileId1": auditFileId1,
				"auditFileId2": auditFileId2,
				"auditFileId3": auditFileId3, 
				"ownerMobile":that.bindMobile,
				"ownerName":that.bindName,
				"communityId":that.communityId,
				"wxAppId":that.headers.appId,
			}
			console.log(652,params)
			if(that.submitBstap==false){
				return;
			}
			that.submitBstap=false
			$.ajax({
				url : url,
				type: 'POST',
				dataType:'json',
				contentType: 'text/plain',
				headers:that.headers,
				data: JSON.stringify(params),
				success : function (res){
					console.log('提交认证接口',res);
					that.submitBstap=true
					if(res.code=='200'){
						that.popupSubmitConfim=false;
						that.showErrorMsg=true;
						that.errormsg='认证成功！';
						setTimeout(function(){
							that.showErrorMsg=false;
						},1500)
						return;	
					}else{
						that.popupSubmitConfim=false;
						that.errorPopup=true;
						that.msg=res.msg
					}
				},
				error:function(res){
					that.popupSubmitConfim=false;
					that.submitBstap=true
					that.errorPopup=true;
					that.msg=res.responseText?res.responseText:'请求超时'
				}
			})
		}
	}
});